//鼠标在白色区域内移动时，能控制彩色容器的高度
//在白色容器内监听鼠标移动事件

//1.获取元素
var speed  = document.querySelector('.speed');
var bar = document.querySelector('.speed-bar');
var video = document.querySelector('.flex');  //获取视频元素    注意：视频元素是video标签，不是video
speed.addEventListener('mousemove',function(e){
    //控制bar的高度
    var y = e.pageY - this.offsetTop; //获取鼠标在白色区域内的y坐标
    var percent = y / this.offsetHeight; //获取鼠标在白色区域内的y坐标占白色区域的高度的比例
    var height = Math.round(percent * 100) + '%'; //获取鼠标在白色区域内的y坐标占白色区域的高度的比例的百分比
    bar.style.height = height; // 设置bar的高度
    var min = 0.4; //设置最小速度
    var max = 4; //设置最大速度
    var playbackRate = percent * (max - min) + min; //获取播放速度
    bar.textContent = playbackRate.toFixed(2) + 'x'; //设置bar的文本内容
    video.playbackRate = playbackRate; //设置播放速度

})


//2.监听鼠标移动事件